<template>
	<view class="">
		<!-- 头部内容 -->
		<u-sticky>
			<view class="dingbu mainpadding2">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<image src="@/static/image/system/gwc.png" style="width: 96rpx;height: 40rpx;" mode=""></image>
				</view>
				<view class="margin_top flexbetween" v-if="is_login && carlist.length">
					<view class="strongtext qianfen nofonweight">全部 {{carlist.length}}</view>
					<view class="strongtext xiaohei nofonweight" v-show="!isedit" @click="isedit=true">编辑</view>
					<view class="strongtext xiaohei nofonweight" v-show="isedit" @click="isedit=false">完成</view>
				</view>
			</view>
		</u-sticky>
		<!-- 商品列表 -->
		<view class="" style="padding-bottom: 140rpx;">
			<view class="mainpadding2">
				<view class="mainpadding ffffff radius margin_top" v-for="item in carlist" :key="item.shop_id">
					<view class="flexleft">
						<view class="margin_right2" @click="checkitemall(item)">
							<!-- <view class="weixz" v-if="!item.checkall"></view> -->
							<u-icon name="checkmark-circle-fill" v-if="!item.checkall" color="#999" size="24"></u-icon>
							<u-icon name="checkmark-circle-fill" v-if="item.checkall" color="#F99740"
								size="24"></u-icon>
						</view>
						<view class="ershiba xiaohei nofonweight">{{item.shop_name}}</view>
					</view>
					<view class="xiahuaxian margin_top flexbetween" v-for="ite in item.goodslist" :key="ite.goods_id">
						<view class="" @click="checkitem(ite)">
							<!-- <view class="weixz" v-if="!ite.ischeck"></view> -->
							<u-icon name="checkmark-circle-fill" v-if="!ite.ischeck" color="#999" size="24"></u-icon>
							<u-icon name="checkmark-circle-fill" v-if="ite.ischeck" color="#F99740" size="24"></u-icon>
						</view>
						<view class="flexleft" style="width: 92%;">
							<view class="shili margin_right2">
								<image :src="ite.image" mode=""></image>
							</view>
							<view class="" style="width: 66%;">
								<view class="titletext fonweight yhxk">{{ite.title}}</view>
								<!-- <view class="strongtext nofonweight xiankuan margin_top1">这是商品规格介绍.</view> -->
								<view class="flexbetween margin_top1">
									<view class=" strongtext xiaohei">厂商指导价
										<text class="strongtext xiaohei fonweight">￥{{ite.RetailStdPrice}}</text>
									</view>
									<!-- <view class="lanbox">库存 {{ite.stock}}</view> -->
								</view>
								<view class="margin_top1 flexleft">
									<view class=" strongtext xiaohong">成本补贴价
										<text class="sanshier xiaohong fonweight">￥{{ite.vipprice}}</text>
									</view>
								</view>
								<view class="flexright margin_top1">
									<view class="margin_right1" @click="reduceFn(ite)">
										<u-icon name="minus-circle" size="20"></u-icon>
									</view>
									<input class="input margin_right1 textcenter" type="number" v-model="ite.number">
									<view class="" @click="addFn(ite)">
										<u-icon name="plus-circle" size="20"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding">
				<view class="xiaocheng strongtext fonweight textcenter">/ 猜你想找 /</view>
				<!-- 商品列表 -->
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				</view>
				<view class="flexbetween flex_wrap">
					<view class="spbox margin_top dingwei" v-for="item in list.data" :key="item.Rec"
						@click="tzspxq(item.Rec)">
						<!-- <view class="jianth"></view> -->
						<view class="shangpt">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="huisebox ">
							<view class="sanshier xiaohei fonweight yhxk">{{item.FullName}}</view>
							<view class="flexbetween margin_top1">
								<view class="strongtext xiaohong ">月销量{{item.mouthsales}}</view>
								<view class="strongtext xiaohui ">库存 {{item.stock}}</view>
							</view>
							<view class="strongtext xiaohei yhxk margin_top1" v-if="item.comment_des">
								最新评价：{{item.comment_des}}</view>
						</view>
						<view class="fensbox ">
							<view class="strongtext xiaoka nofonweight">成本补贴价
								<text class="strongtext xiaoka fonweight">￥{{item.vipprice}}</text>
							</view>
							<!-- <view class="flexbetween margin_top1">
								<view class="smalltext xiaoka nofonweight ">厂商指导价
									<text class="smalltext xiaoka fonweight">￥{{item.RetailStdPrice}}</text>
								</view>
								<view class="smalltext xiaoka nofonweight  textright">可省
									<text class="smalltext xiaohong fonweight">{{item.zjPrice}}元</text>
								</view>
							</view> -->
							<view class="">
								<view class=" margin_top1 smalltext xiaoka nofonweight ">厂商指导价
									<text class="smalltext xiaoka fonweight textright">￥{{item.RetailStdPrice}}</text>
								</view>
								
							</view>
							<view class="flexright margin_top1">
								<view class=" ershil xiaoka nofonweight ">可省</view>
								<text class="xiaohong fonweight" style="font-size: 30rpx;">{{item.zjPrice}}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="carlist.length">
			<!-- 固定底部 -->
			<view class="mainpadding ffffff flexbetween dingwei gudingdb" v-if="!isedit && is_login">
				<view class="jianth2"></view>
				<view class="">
					<view class=" titletext xiaohei">厂商指导价
						<text class="titletext xiaohei fonweight">￥{{allprice}}</text>
					</view>
					<view class=" titletext xiaohong">成本补贴价
						<text class="xiaohong fonweight" style="font-size: 36rpx;">￥{{allvipprice}}</text>
					</view>
				</view>
				<view class="xiaobrn">
					<view class="ershiba xiaobai">直降
						<text class="ershiba xiaobai fonweight">{{allzjprice}}元</text>
					</view>
				</view>
			</view>
			<!--删除购物车内容  -->
			<view class="mainpadding ffffff flexbetween dingwei gudingdb" v-if="isedit">
				<view class="flexleft" @click="selectall()">
					<view class="margin_right2">
						<!-- <view class="weixz" v-if="!qx"></view> -->
						<u-icon name="checkmark-circle-fill" v-if="!qx" color="#999" size="24"></u-icon>
						<u-icon name="checkmark-circle-fill" v-if="qx" color="#F99740" size="24"></u-icon>
					</view>
					<view class="strongtext xiaohui nofonweight" >全选</view>
				</view>
				<view class="shancbtn" @click="delcars">删除</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				carlist: [],
				isedit: false,
				qx: false,
				allprice:"",
				allvipprice:"",
				allzjprice:"",
				list: {
					data: []
				},
				page: 1,
				pjList: [],
				pagedown: true,
				is_login:false,
				
			}
		},
		onLoad() {
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin()
			if (httpRequest.checkIsLogin()) {
				this.getcar()
				this.init()
			} else {
				this.carlist = []
			}
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "一点点大药房",
				path: "pages/index?code=" + uni.getStorageSync("yqm"),
			}
		},
		onShareTimeline: function() {
			return {
				title: "一点点大药房",
				path: "pages/index?code=" + uni.getStorageSync("yqm"),
			}
		},
		watch: {
			carlist: {
				deep: true,
				handler(newval) {
					let num = 0
					let allvipprice = 0
					let allprice = 0
					let allzjprice = 0
					newval.forEach(item => {
						let smallnum = 0
						item.goodslist.forEach(ite => {
							if (ite.ischeck) {
								allvipprice = allvipprice + Number(ite.vipprice) * ite.number
								allprice = allprice + Number(ite.RetailStdPrice) * ite.number
								allzjprice = allzjprice + ((Number(ite.RetailStdPrice) - Number(ite.vipprice)) * ite.number)
								smallnum = Number(smallnum) + 1
							}
						})
						if (smallnum == item.goodslist.length) {
							item.checkall = true
						} else {
							item.checkall = false
						}
						if (item.checkall) {
							num = Number(num) + 1
						}
					})
					if (num == newval.length) {
						this.qx = true
					} else {
						this.qx = false
					}
					this.allvipprice = allvipprice
					this.allprice = allprice
					this.allzjprice = allzjprice
				}
			}
		},
		methods: {
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_index/shangpxq?id=' + id
				})
			},
			init(isPage, page) {
				let _this = this;
				let url = '/api/goodscl/goodsindex'
				let data = {
					page: page || 1,
					limit: 12,
					index3_show: 1
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						if (res.data.length == 0) {
							this.pagedown = false
						}
						if (isPage == true) {
							_this.list.data = _this.list.data.concat(res.data);
						} else {
							_this.list.data = res.data;
							this.pagedown = true
							this.page = 1
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (!this.pagedown) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			delcars(){
				let arr = []
				this.carlist.forEach(item => {
					item.goodslist.forEach(ite => {
						if (ite.ischeck) {
							arr.push({goods_id:ite.goods_id})
						}
					})
				})
				if(arr.length==0){
					httpRequest.toast("请选择要删除的内容！")
					return false
				}
				httpRequest.request('/api/cart/delCart', 'POST', {
					data:arr,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getcar()
					}
				})
			},
			reduceFn(ite){
				if(ite.number==1){
					httpRequest.toast("不能再减了哦！")
					return false
				}
				uni.showLoading({
					title:"请稍后"
				})
				httpRequest.request('/api/cart/clCart', 'GET', {
					goods_id:ite.goods_id,
					number:Number(ite.number) - 1
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						ite.number = Number(ite.number) - 1
					}
				})
				
			},
			addFn(ite){
				uni.showLoading({
					title:"请稍后"
				})
				httpRequest.request('/api/cart/clCart', 'GET', {
					goods_id:ite.goods_id,
					number:Number(ite.number) + 1
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						ite.number = Number(ite.number) + 1
					}
				})
				
			},
			selectall(){
				if(this.qx){
					this.carlist.forEach(item=>{
						item.checkall = false
						item.goodslist.forEach(ite => {
							ite.ischeck = false
						})
					})
					this.qx = false
				}else{
					this.carlist.forEach(item=>{
						item.checkall = true
						item.goodslist.forEach(ite => {
							ite.ischeck = true
						})
					})
					this.qx = true
				}
			},
			checkitemall(item) {
				if (item.checkall) {
					item.checkall = false
					item.goodslist.forEach(ite => {
						ite.ischeck = false
					})
				}else{
					item.checkall = true
					item.goodslist.forEach(ite => {
						ite.ischeck = true
					})
				}
			},
			checkitem(item) {
				console.log(item, ":");
				item.ischeck = item.ischeck ? false : true

			},
			getcar() {
				httpRequest.request('/api/cart/cartList', 'POST', {}).then(res => {
					res.data.forEach(item => {
						this.$set(item, "checkall", false)
						item.goodslist.forEach(ite => {
							this.$set(ite, "ischeck", false)
						})
					})
					this.carlist = res.data

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shangpt {
		height: 320rpx;
		width: 100%;
		border: 20rpx 20rpx 0 0;
	
		image {
			width: 100%;
			height: 100%;
			border: 20rpx 20rpx 0 0;
		}
	}
	.weixz {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}
	.jianth {
		width: 28rpx;
		height: 38rpx;
		position: absolute;
		right: 42rpx;
		bottom: 48rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jiant.png');
	}
	.jianth2 {
		width: 28rpx;
		height: 38rpx;
		position: absolute;
		right: 142rpx;
		bottom: 86rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jiant.png');
	}
	.huisebox {
		padding: 10rpx 20rpx;
		background: #E6E6E6;
	}
	
	.fensbox {
		padding: 10rpx 20rpx;
		background: #FED8D2;
		border: 0 0 20rpx 20rpx;
	}

	.shancbtn {
		width: 200rpx;
		height: 78rpx;
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 300;
		color: #EE6D2D;
		border: 1rpx solid #999999;
	}
.spbox {
		width: 48%;
	}
	

	.xiaobrn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 282rpx;
		height: 64rpx;
		background: #F17832;
		border-radius: 39rpx 39rpx 39rpx 39rpx;
	}

	.input {
		width: 100rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 6rpx 10rpx;
		background: #F2F2F2;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.lanbox {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		color: #4B88B4;
		width: 115rpx;
		height: 41rpx;
		background: #E1F3FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #7FBDE3;
	}

	.fenbox {
		width: 153rpx;
		height: 41rpx;
		background: #FFEFF2;
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #C01933;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid rgba(192, 25, 51, 1);
	}

	.shili {
		width: 189rpx;
		height: 199rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.dingbu {
		background-color: #fed8d3;
	}
</style>